/* *************************面向对象方式 创建 左右轮播**********************/
//创建 类
// id  实参代表创建 的轮播所在的位置
function lbtObj(id, width, shu) {
	this.id = id //每个对象的ID
	this.lb = $("#" + this.id); //轮播构架所在的位置；
	this.onOff = $("#" + this.id + " " + ".lbt"); //轮播运动停止框架
	this.lbt = $("#" + this.id + " " + ".lbt-box"); //轮播的项
	this.nav = $("#" + this.id + " " + ".nav-lbt"); //导航项
	this.l = $("#" + this.id + " " + ".l"); //左按钮
	this.r = $("#" + this.id + " " + ".r"); //右按钮
	this.time; //每个轮播的单独定时器
	this.inde = 0; //创建轮播项与导航之间联系即下标
	this.flag = true //创建运动开关
	this.inis(); //调用函数 创建事件
	this.span; //代表导航项
	this.width = width; //运动宽度
	this.shu = shu;
}
//创建 lbtObj的原型对象函数 节省内存
lbtObj.prototype = {
		inis: function() {
			var that = this
				//创建节点对象  获取数据 
			$.get("../js/hoome.json", function(data) {
				//每个轮播有各自的 节点 data[1] 是轮播数据
				that.addEvnt(data[1]);

				//创建事件；
				that.run()
			})
		},
		//创建节点函数
		addEvnt: function(data) {
			//获取需要的数据
			var lBt = data;
			//循环便利取出需要的各个集合
			for (var lbKey in lBt) {
				//创建轮播的图片
				if (lbKey == "lbt") {
					//循环出各个信息
					var lbtImg = lBt[lbKey]
					for (var j = 0; j < lbtImg.length; j++) {
						//获取到每个项中的类,并知道几个商品创建节点
						var lbtL = lbtImg[j];
						var li = $("<li></li>");
						li.html("<a href='" + lbtL.menuTarge + "'><img src='" + lbtL.p + "'/></a>");
						//放入指定节点
						this.lbt.append(li); //轮播项	
					}
					//注意是无缝轮播滚动所以在最后加一张
					var li = $("<li></li>");
					li.html("<a href='" + lbtImg[0].menuTarge + "'><img src='" + lbtImg[0].p + "'/></a>");
					//将其放入指定节点
					this.lbt.append(li); //轮播项
				}
				//创建导航项
				if (lbKey == "nav") {
					//获取出每个导航信息
					var navSp = lBt[lbKey];
					for (var jj = 0; jj < navSp.length; jj++) {
						//获取到每个类并知晓创建几个 创建节点
						var navL = navSp[jj];
						//因为初始样式不同所创建不同
						if (jj == 0) {
							var span = $("<span class='sp-b'></span>");
						} else {
							var span = $("<span></span>");
						}
						//节点内添加信息
						span.html(navL.p)
							//添加到文本中
						this.nav.append(span)
					}
				}
				//所有商品创建完成 获取所需节点
				this.span = $("#" + this.id + "  " + ".nav-lbt span")
//				this.nextt = $("#" + this.id + " " + ".nav-lbt span").length;
			}
		},
		//创建事件
		run: function() {
			var that = this;

			//轮播项的运动
			timeMove();
			//右点击事件
			this.r.click(function() {
					if (that.flag) {
						//关掉开关
						that.flag = false;
						//判断临界值
						if (that.inde >= that.shu) {
							that.lbt.css({
								left: 0
							});
							that.inde = 0
						}
						//运动到下一张
						that.inde++;
						//设置导航样式
						if (that.inde >= that.shu) {
							that.span.eq(0).css({
								background: "#da2633"
							}).siblings().css({
								background: "#1e0708"
							})
						} else {
							that.span.eq(that.inde).css({
								background: "#da2633"
							}).siblings().css({
								background: "#1e0708"
							})
						}
						//轮播项运动
						that.lbt.stop().animate({
							left: -that.inde * that.width
						}, 400, function() {
							that.flag = true
						})
					}
				})
				//左点击事件
			this.l.click(function() {
					if (that.flag) {
						//执行向左运动函数
						that.flag = false
							//判断临界值  
						if (that.inde == 0) {
							that.lbt.css({
								left: -that.shu * that.width
							});
							that.inde = that.shu
						}
						that.inde--

							that.span.eq(that.inde).css({
								background: "#da2633"
							}).siblings().css({
								background: "#1e0708"
							})
							//轮播项运动
						that.lbt.stop().animate({
							left: -that.inde * that.width
						}, 400, function() {
							that.flag = true
						})
					}
				})
				//移入定时器停止
			this.onOff.mouseover(function() {
				//停止定时器
				clearInterval(that.time)
			});
			//创建移出定时器运动事件；
			this.onOff.mouseout(function() {
					//启动定时器
					timeMove()
				})
				//封装轮播项运动函数
			function timeMove() {
				that.time = setInterval(function() {
					//向右运动函数
					that.r.click()
				}, 2000)
			}
			//移入导航事件
			this.span.mouseover(function() {
				//改变当前span 样式
				$(this).css({
						background: "#da2633"
					}).siblings().css({
						background: "#1e0708"
					})
					//获取当前下标并附给inde
				that.inde = $(this).index();
				that.lbt.stop().animate({
					left: -that.inde * that.width
				}, 400, function() {})
			})
		}
	}
	//创建轮播
var a = new lbtObj("box3", 1263, 5)
	/************************获取轮播下的推荐**************************/
$.get("../js/hoome.json", function(data) {
		//获取轮播信息
		var lbt = data[1];
		//找到轮播下的推荐 循环便利
		for (var key in lbt) {
			if (key == "tuejian") {
				//获取到推荐
				var tj = lbt[key];
				//获取其中的信息
				for (var j = 0; j < tj.length; j++) {
					//获取到信息后创建节点对象
					var div = $("<div class='cch'></div>")
						//向创建的节点中推入信息
					if (j == 0) {
						var str = '<div class="t-img"><a href="' + tj[j].menuTarge + '"><img src="' + tj[j].p + '"/></a></div>' +
							'<p><a href="' + tj[j].menuTarge + '">' + tj[j].p1 + '</a></p>' +
							'<p><a href="' + tj[j].menuTarge + '">' + tj[j].p2 + '</a></p>' +
							'<p><a href="' + tj[j].menuTarge + '">' + tj[j].p3 + '</a></p>'

					} else {
						var str = '<div class="t-img"><a href="' + tj[j].menuTarge + '"><img src="' + tj[j].p + '"/></a></div>' +
							'<span><a href="' + tj[j].menuTarge + '"><i></i></a></span>' +
							'<p><a href="' + tj[j].menuTarge + '">' + tj[j].p2 + '</a></p>' +
							'<p><a href="' + tj[j].menuTarge + '">' + tj[j].p3 + '</a></p>'

					}
					div.html(str);
					//将数据加载到文本中
					$(".ch-box").append(div)
				}
			}
			//创建健身馆系类
			if (key == "TJxile") {
				//获取健身馆类信息
				var jsg = lbt[key];
				//便利获取
				for (var k = 0; k < jsg.length; k++) {
					//创建节点   内部图像位置有偏移
					if (k < 2) {
						var div = $('<div class="ce-box ce-a"></div>')
					} else {
						var div = $('<div class="ce-box"></div>')
					}
					//信息载体创建完成后 将信息放入载体中  图片位置有偏移
					if (k == jsg.length - 1) {
						var str = '<div class="ce-img"><a href="' + jsg[k].menuTarge + '"><img class="x-img" src="' + jsg[k].p + '"/></a></div>' +
							'<p><a href="' + jsg[k].menuTarge + '">' + jsg[k].p2 + '</a></p>' +
							'<p><a href="' + jsg[k].menuTarge + '">' + jsg[k].p3 + '</a></p>';
					} else {
						var str = '<div class="ce-img"><a href="' + jsg[k].menuTarge + '"><img  src="' + jsg[k].p + '"/></a></div>' +
							'<p><a href="' + jsg[k].menuTarge + '">' + jsg[k].p2 + '</a></p>' +
							'<p><a href="' + jsg[k].menuTarge + '">' + jsg[k].p3 + '</a></p>';
					}
					div.html(str);
					//将数据加载到文本中
					$(".cell-wei").append(div)
				}
				//数据加载完成后执行事件
				GYMmotion()
					//				 GYMmotion("#fCell-box .cell-b .cell-wei .ce-box .ce-img img","margin-left",-8,8,200)

			}
		}

	})
	//创建该健身馆运动事件函数
function GYMmotion() {
	$("#fCell-box .cell-b .cell-wei .ce-box .ce-img img").hover(function() {
		$(this).stop().animate({
			"margin-left": -8
		}, 200)
	}, function() {
		$(this).stop().animate({
			"margin-left": 8
		}, 200)
	})

}

/************************************透明度轮播事件************************************************************/

//思路创建一个定时器
//创建相互关联的 index  
//获取相应节点  判断事件运动 opactiy
//每过2两秒运行一次 	

//创建透明轮播 的面向对象

//dom 代表放入的节点
//navdom 导航节点
//event 获取的数据是啥

function TmLbt(id, navid, Event, shu) {
	this.id = id;
	this.navid = navid;
	this.dom = $("." + this.id); //放入的节点
	this.navdom = $("." + this.navid)
	this.Event = Event; //获取数据的名
	this.TMtime; //透明度定时器
	this.TmIndex = 0; //透明度下标
	this.TMflag = true; //定义开关
	this.r = $("." + this.id + " " + ".tm-r") //左按钮
	this.l = $("." + this.id + " " + ".tm-l") //右按钮
	this.span; //获取加载的轮播项
	this.li; //获取加载的导航
	this.inib()
	this.shu = shu
}
//创建该对象事件 放在原型对象中
TmLbt.prototype = {
		//获取数据
		inib: function() {
			var that = this;
			//获取数据
			$.get("../js/hoome.json", function(data) {
				//创建各自的节点对象
				that.addEvent(data[1]);
				//创建事件
				that.run()
			})
		},
		//创建加载节点的函数
		addEvent: function(data) {
			//总体的轮播信息
			var lbt = data;
			//for in 循环便利获取所需信息
			for (var key in lbt) {
				//找到所需的轮播
				if (key == this.Event) {
					var ltm = lbt[key];
					for (var i = 0; i < ltm.length; i++) {
						//获取后创建节点
						if (i == 0) {
							var span = $("<span class='tm-active'></span>")
							var li = $('<li class="l-t-active"></li>')
						} else {
							var span = $('<span></span>')
							var li = $('<li></li>')
						}
						//创建存放的字符串
						var str = '<a href="' + ltm[i].menuTarge + '"><img src="' + ltm[i].p + '"/></a>'
						span.html(str);
						//放入文档中
						this.dom.append(span)
						this.navdom.append(li)
					}
				}
				//加载完成
				this.span = $("." + this.id + " " + "span") //获取到加载项
				this.li = $("." + this.navid + " " + "li") //获取加载的导航
			}

		},
		//创建事件
		run: function() {

			var that = this
				//			//自动轮播
			TMmove()

			function TMmove() {
				that.TMtime = setInterval(function() {
					that.r.click()
				}, 2000)
			}

			//点击右侧按钮
			this.r.click(function() {
					if (that.TMflag) {
						that.TMflag = false
							//当前图片消失
						that.span.eq(that.TmIndex).css({
								display: "none"
							})
							//当前 导航样式该变
						that.li.eq(that.TmIndex).removeClass("l-t-active")
							//变换下一张
						that.TmIndex++
							//判断界限
							if (that.TmIndex > that.shu) {
								that.TmIndex = 0
							}
							//下一张图片导航样式改变
						that.li.eq(that.TmIndex).addClass("l-t-active")
							//下一张图片出现
						that.span.eq(that.TmIndex).css({
								display: "block"
							}).siblings("span").css({
								//让其他兄弟元素透明度为0
								opacity: 0
							})
							//下一张图片透明度0~~1
						that.span.eq(that.TmIndex).animate({
							opacity: 1
						}, 1000, function() {
							that.TMflag = true
						})
					}
				})
				//				//左点击事件
			this.l.click(function() {
					if (that.TMflag) {
						that.TMflag = false
							//当前图片消失
						that.span.eq(that.TmIndex).css({
								display: "none"
							})
							//当前 导航样式该变
						that.li.eq(that.TmIndex).removeClass("l-t-active")
							//变换下一张
						that.TmIndex--
							//判断界限
							if (that.TmIndex < 0) {
								that.TmIndex = that.shu
							}
							//下一张图片导航样式改变
						that.li.eq(that.TmIndex).addClass("l-t-active")
							//下一张图片出现
						that.span.eq(that.TmIndex).css({
								display: "block"
							}).siblings("span").css({
								//让其他兄弟元素透明度为0
								opacity: 0
							})
							//下一张图片透明度0~~1
						that.span.eq(that.TmIndex).animate({
							opacity: 1
						}, 1000, function() {
							that.TMflag = true
						})
					}
				})
				//				//移入轮播项时停止定时器
			this.dom.mouseover(function() {
					clearInterval(that.TMtime)
				})
				//移除运动
			this.dom.mouseout(function() {
					TMmove()
				})
				//				//下导航点击事件
			this.li.click(function() {
				if (that.TMflag) {
					that.TMflag = false
						//停止定时器
					clearInterval(that.TMtime)
						//当前图片消失
					that.span.eq(that.TmIndex).css({
							display: "none"
						})
						//当前 导航样式该变
					that.li.eq(that.TmIndex).removeClass("l-t-active")
						//获取点击导航的下标
						//变换下一张
					that.TmIndex = $(this).index();
					//判断界限
					//下一张图片导航样式改变
					that.li.eq(that.TmIndex).addClass("l-t-active")
						//下一张图片出现
					that.span.eq(that.TmIndex).css({
							display: "block"
						}).siblings("span").css({
							//让其他兄弟元素透明度为0
							opacity: 0
						})
						//下一张图片透明度0~~1
					that.span.eq(that.TmIndex).animate({
						opacity: 1
					}, 1000, function() {
						that.TMflag = true
							//启动定时器
						TMmove()
					})
				}
			})
		}
	}
	//左侧轮播
var zzz = new TmLbt("left-tm", "l-t-n", "tmlbt1", 3)
	//右侧轮播图
var aaa = new TmLbt("right-tm", "r-t-n", "tmlbt2", 2)
	/**********************************************详细商品功能实现******************************************/
	//加载数据
$.get("../js/hoome.json", function(data) {
	//获取商品详细信息包
	var xbox = data[2];
	//循环获取其中多少个类
	for (var key in xbox) {
		var lei = xbox[key]
			//创建盒子
		if (key == "1") {
			var div = $('<div class="pag pag-1"></div>')
		} else {
			var div = $('<div class="pag"></div>')
		}
		//创建类
		for (var k = 0; k < lei.length; k++) {
			//几个项
			var xang = lei[k]
				//创建项 盒
			var pagxq = $('<div class="pag-xq"></div>')
			var xqbox = $('<div class="xq-box"></div>')
			var paggxq = $('<div class="pagg-xq"></div>')
				//创建img 盒子
			var pagi = $('<div class="pag-i"></div>')
				//创建装载导航的盒子
			var spnav = $('<div class="sp-nav"></div>')
				//创建的个数
			for (var j = 0; j < xang["p"].length; j++) {
				if (j == 0) {
					var span = $('<span class="pag-active"></span>')
				} else {
					var span = $('<span></span>')
				}
				span.html('<a href="' + xang["menuTarge"][j] + '"><img src="' + xang["p"][j] + '"/></a>')
				pagi.append(span)
				var i = $('<i></i>')
				i.html('<img src="' + xang["p"][j] + '"/>')
				spnav.append(i)
			}
			//创建下商品盒子
			var paggxp = $('<div class="pagg-xq"></div>');
			//创建详情
			var p = $('<p></p>')
			p.html(xang['jieshao'])
				//放入节点中
			paggxp.append(p)
				//创建价格
			var b = $('<b></b>')
			b.html(xang['pic'])
				//放入节点中
			paggxp.append(b)
				//放入节点中 将装载图片的盒子放入总字符串中
			pagi.append(spnav)
				//上传图片
			xqbox.append(pagi)
				//上传信息
			xqbox.append(paggxp)
				//放入节点中
			pagxq.append(xqbox)
			div.append(pagxq)
		}
		//放如文档
		$("#boxx").append(div)
			//执行事件
		qihuan()
	}

})

//导航切换事件
$(".pag-nav .p-n li").mousemove(function() {
	//移入事件
	$(this).css({
		background: "#ffffff"
	}).siblings('li').css({
		background: "#f6f6f6"
	})
	$(this).find("p").css({
			display: "block"
		}).parents("li").siblings('li').find("p").css({
			display: "none"
		})
		//获取当前下标
	var index = $(this).index();
	//改变下列商品详情出现隐藏
	$(".pag").eq(index).css({
		display: "block"
	}).siblings(".pag").css({
		display: "none"
	})
})

//商品信息切换函数
function qihuan() {
	//思路使用委托写法
	//商品切换
	$(".pag-i").each(function() {
		//商品背景变换   找到其父级改变颜色
		$(this).parents(".xq-box").hover(function() {
			$(this).css({
					background: "#ee2737"
				}).parents(".pag-xq").css({
					background: "#ee2737"
				})
				//清除边框  改变字体颜色
			$(this).find(".pagg-xq").addClass("pagg-xq-active")
		}, function() {
			//移出 后事件
			$(this).css({
					background: ""
				}).parents(".pag-xq").css({
					background: ""
				})
				//添加边框  改变字体颜色
			$(this).find(".pagg-xq").removeClass("pagg-xq-active")
		})

		//商品小图片切换效果
		$(this).find("i").mouseover(function() {
			//改变当前样式
			$(this).css({
					border: "red 1px solid"
				}).siblings("i").css({
					border: "#e7e7e7 1px solid"
				})
				//当前下标
			var index = $(this).index()
				//获取父节点 
			var fq = $(this).parents(".pag-i")
				//改变图片样式
			fq.find("span").eq(index).css({
				display: "block",
			}).siblings("span").css({
				display: "none"
			})
		})
	})
}

/***************************系列商品事件*****************************************************/
/*使用面向对象方式创建楼层效果与结构*/
//id:代表存放的div盒子
//url:代表获取的json数据键名位置  、、3
function louceng(id, URl) {
	this.d = id
	this.id = $("#" + this.d);
	this.URL = URl;
	this.init()
	this.inde
}
//创建该对象的原型对象
louceng.prototype = {
		//该对象的加载数据节点 键值对格式
		init: function() {
			var that = this
				//获取数据创建商品详情
			$.get("../js/hoome.json", function(data) {
				//创建该节点
				that.addEvent(data[that.URL])

			})

		},
		//创建节点
		addEvent: function(data) {
			var that = this
				//获取到跑步系类
			var xl = data;
			//					console.log(xl)
			//分部加载
			//加载标题
			/*********标题创建完毕******************************/
			var bt = xl["biaoti"]
				//标题是对象 创建节点
			var div = $('<div class="xilei-biaoti"></div>')
				//创建完毕后 创建信息
			var h3 = $('<h3></h3>')
			var span = $('<span></span>')
			var i = $('<i></i>')
				//添加内容
			h3.html(bt['h3']);
			span.html(bt['span']);
			i.html(bt['gd'])
				//放入盒子中
			div.append(h3);
			div.append(span);
			div.append(i);

			//标题创建完成放入文档中
			this.id.append(div);
			/**************创建 小脚标 载体***************/
			var jbdiv = $('<div class="xilei-jb"><p></p></div>')
				//上传到文档中
			this.id.append(jbdiv);
			/*********创建商品栏************************************/
			//创建载体 最大盒子
			var xldiv = $('<div class="xilei-lan"></div>')
				//创建导航栏

			//获取栏的信息
			var lan = xl["lan"]
				//创建装载信息的盒子 
			var liebiao = $('<div class="liebiao"></div>')
				//其内容多个for循环
			for (var i = 0; i < lan.length; i++) {
				var xinxi = lan[i]
					//创建装载栏的盒子
				var dl = $('<dl></dl>')
					//创建盒子内信息
				for (var j = 0; j < xinxi.length; j++) {
					//创建节点
					if (j == 0) {
						var dd = $('<dt></dt>')
					} else {
						var dd = $('<dd></dd>')
					}
					//节点创建完成后添加信息
					if (xinxi[j]["i"] == "a") {
						dd.html('<span><a href="' + xinxi[j]["menuTarge"] + '">' + xinxi[j]["p"] + '</a></span>')
					} else {
						dd.html('<a href="' + xinxi[j]["menuTarge"] + '">' + xinxi[j]["p"] + '</a>')
					}
					//创建完成后放入节点中
					dl.append(dd)
				}
				//所有信息都储存完后放入大河内
				liebiao.append(dl)
			}
			//放入总盒 
			xldiv.append(liebiao)

			/*************创建图片栏*********************************/
			//创建盒子
			var imgdiv = $('<div class="center-img"></div>')
			imgdiv.html('<a href="#"><img src="' + xl["img"] + '" /></a>')
				//放入大盒字内
			xldiv.append(imgdiv)
				/***************创建导航*************************/

			var navx = xl["nav"]
			var navdiv = $('<ul class="right-nav"></ul>')
				//for循环去除信息
			for (var k = 0; k < navx.length; k++) {
				//创建装载盒子
				if (k == 0) {
					var li = $('<li class="li-nav-active"></li>')
				} else {
					var li = $('<li></li>')
				}
				//填写li 内容
				li.html('<a href="#">' + navx[k] + '</a>')
					//放入父集
				navdiv.append(li)
			}
			//装载完后放入大盒子
			xldiv.append(navdiv)

			/******************创建装载信息盒子的**********************************/
			var zong = xl['he']
				//创建盒子
			var navxinxi = $('<div class="nav-xinxi"></div>')
				//循环或取几个类
			for (var l = 0; l < zong.length; l++) {
				//获取类
				var lr = zong[l];
				//创建类盒
				if (l == 0) {
					var nx = $('<div class="n-x n-x-active "></div>')
				} else {
					var nx = $('<div class="n-x"></div>')
				}
				//为每个类盒创建其内项
				for (var f = 0; f < lr.length; f++) {
					var gg = lr[f];
					//创建项
					if (f < 3) {
						var nxxang = $('<div class="n-x-xang n-x-xang-active "></div>')
					} else {
						var nxxang = $('<div class="n-x-xang"></div>')
					}
					//为项创建节点
					var nximg = $('<div class="n-x-img"><div></div>')
					var nxjs = $('<div class="n-x-js"></div>')
					var bh = $('<div class="bh"></div>')
						//添加节点内的信息
					nximg.html('<a href="' + gg.menuTarge + '"><img src="' + gg['src'] + '"/></a>')
					nxjs.html('<p>' + gg['p1'] + '</p><span>' + gg['pic'] + '</span>')
					bh.html('<p>' + gg['ph'] + '</p>')
						//扔入节点内
					nxxang.append(nximg);
					nxxang.append(nxjs);
					nxxang.append(bh);
					nx.append(nxxang)
				}
				//放入
				navxinxi.append(nx)
			}
			//将nxxang放入大盒
			xldiv.append(navxinxi)
				//将创建节点放入文本中
			this.id.append(xldiv)
				//执行事件
			$("#" + this.d + " " + ".right-nav li").mouseover(function() {
				$(this).addClass("li-nav-active").siblings("li").removeClass("li-nav-active")
					//获取当前下标
				var inde = $(this).index();

				//改变对应盒子样式
				$("#" + that.d + " " + ".nav-xinxi .n-x").eq(inde).addClass("n-x-active").siblings(".n-x").removeClass("n-x-active")
			})
			$("#" + this.d + " " + ".nav-xinxi .n-x").each(function() {
				//委托写法  创建事件
				$(this).on("mouseover", ".n-x-xang", function() {
						//改变当前的商品背景色
						$(this).addClass("n-x-a").siblings(".n-x-xang").removeClass("n-x-a")
					})
					//离开事件
				$(this).on("mouseout", ".n-x-xang", function() {
					//改变当前的商品背景色
					$(this).removeClass("n-x-a")
				})
			})
		}
	}
	//创建 楼梯
var ss = new louceng("paobu-box", 3)
var ss1 = new louceng("lanqiu-box", 4)
var ss1 = new louceng("yundong-box", 5)
var ss2 = new louceng("xunlian-box", 6)
var ss3 = new louceng("pingyu-box", 7)

/******************************************************推荐商品效果************************************************/
//获取数据
$.get("../js/hoome.json", function(data) {
	//			console.log(data[8])
	var xz = data[8]
		//创建节点
	for (var key in xz) {
		if (key == "tuei1") {
			//获取每个类
			var lei = xz[key];
			for (var i = 0; i < lei.length; i++) {
				//创建类的个数
				var div = $('<div class="pb-lei pb-lei' + i + '">')
					//内部节点
				var pb = $('<div class="pb-img">')
				var p = $('<p></p>')
				pb.html('<a href="' + lei[i]["menuTarge"] + '"><img src="' + lei[i]['src'] + '"/></a>')
				p.html('<a href="' + lei[i]["menuTarge"] + '">' + lei[i]["p"] + '</a>')
					//放入节点内
				div.append(pb);
				div.append(p);
				$('.paobu-lianjie .pb-box').append(div)
			}
			//放入文档中
		}
		if (key == "tuei2") {
			//获取每个类
			var lei = xz[key];
			for (var i = 0; i < lei.length; i++) {
				//创建类的个数
				var div = $('<div class="pb-lei pb-lei' + i + '">')
					//内部节点
				var pb = $('<div class="pb-img">')
				var p = $('<p></p>')
				pb.html('<a href="' + lei[i]["menuTarge"] + '"><img src="' + lei[i]['src'] + '"/></a>')
				p.html('<a href="' + lei[i]["menuTarge"] + '">' + lei[i]["p"] + '</a>')
					//放入节点内
				div.append(pb);
				div.append(p);
				$('.lanqiu-lianjie .pb-box').append(div)
			}
			//放入文档中
		}
	}
	$('.paobu-lianjie .pb-lei').hover(function() {
		$(this).animate({
			'margin-top': -8 + 'px'
		}, 100)
	}, function() {
		$(this).animate({
			'margin-top': 0 + 'px'
		}, 100)
	})
	$('.lanqiu-lianjie .pb-lei').hover(function() {
		$(this).animate({
			'margin-top': -8 + 'px'
		}, 100)
	}, function() {
		$(this).animate({
			'margin-top': 0 + 'px'
		}, 100)
	})
})

$('.pb-lei').hover(function() {
	$(this).animate({
		'margin-top': -8 + 'px'
	}, 100)
}, function() {
	$(this).animate({
		'margin-top': 0 + 'px'
	}, 100)
})

/*******************************用户登录楼商品信息*****************************************************/

//改变页面上的商品总数 初始化商品数
$("#count").html(getTotal())
$("#sps").html(getTotal())

/***************************************搜索框搜索事件************************************************************/
//思路首先要知道同源策略  问题  不能跨域这 里要知道  script 中的src  可以跨域
//获取查找信息
//	window.onload = function() {
$(window).keyup(function() {

		var val = $("#txt1").val()
		var script = $('<script></script>')
		script.attr("src", "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + val + "&cb=hhl")
			//创建完后将其上传到文档中
		$("#gg").append(script)
		$("#gg script").remove()

	})
	//	}
	//其返回函数 返回的参数是我们所需要的值

function hhl(data) {
	$(".baiduxinxi").html('')
	if (data.s.length > 5) {
		var kk = 5
	} else {
		var kk = data.s.length
	}
	for (var i = 0; i < kk; i++) {
		//创建节点
		var li = $('<li></li>')
		li.html('<a href="https://www.baidu.com/s?wd=' + data.s[i] + '" target="_blank">' + data.s[i] + '</a>')
		$(".baiduxinxi").append(li)
	}
}
/********************************************移除搜索时显示隐藏************************************************************************/
$("#seek form #txt1").keyup(function() {
	$(".baiduxinxi").css({
		display: "block"
	})

})

/********************************************链接跳转************************************************************************/

$("#bt1").click(function() {
		location.href = "https://www.baidu.com/s?wd=" + $("#txt1").val()
	})

alert("点击热卖商品跳转商品列表页")


	//		$(window).click(function(){
	//			$(".baiduxinxi").css({
	//					display:"none"
	//				})
	//		})
	//		$("#seek form #txt1").blur(function(){
	//				$("#seek form #txt1").val("")
	//		})
	//		$("#seek").mouseout(function(){
	////			setTimeout(function(){
	//				$(".baiduxinxi").css({
	//					display:"none"
	//				})
	////			},2000)
	//		})

/*****************************************加载导航信息****************************************************************/
//		$.get("../js/hoome.json", function(data) {
//				//data  代表成功的时候，所得到的数据（内容）
//				//for循环 获取类型数据
//				for (var i = 0; i < data.length; i++) {
//					//获取头部导航数据
//					var navObj = data[0];
//				}
//				//for in 循环获取其内部各导航名
//				for (var key in navObj) {
//					//获取各个导航名  key 判断 因为每个导航内部样式不同所以 判断
//					//生成导航
//					if (key == "headline") {
//						var navarr = navObj[key]
//							//获取到导航个数
//						for (var u = 0; u < navarr.length; u++) {
//							//获取到每个导航信息
//							var navs = navarr[u];
//							//创建装载信息的节点
//							var li = $("<li class='initial'></li>")
//								//每个节点信息不同循环
//								//为创建的接点填信息
//							if (u == 0) {
//								li.html("<a href='" + navs.menuTarge + "'><div id='logo'></div></a>")
//
//							} else {
//								li.html("<a href='" + navs.menuTarge + "'>" + navs.menuName + "<i></i></a>")
//							}
//							$(".nav1").append(li)
//						}
//					}
//					if (key == "xilei") {
//						var xl = navObj[key]; //定义系列对象
//						//循环系列内部内容 分别放入创建的节点
//						for (var j = 0; j < xl.length; j++) {
//							var xlObj = xl[j]; //代表每个系列中的单独信息
//							//创建节点
//							var xldiv = $("<div class='colL5 lboder'></div>")
//							xldiv.html("<p><img src='" + xlObj.p + "'/></p><p><a href='" + xlObj.menuTarg + "'>" + xlObj.p1 + "</a></p>")
//								//将创建好的节点放入指定盒子中	 
//							$(".ls5").append(xldiv)
//						}
//					}
//					if (key == "gengduo") {
//						var gd = navObj[key]; //定义系列对象
//						//循环更多内部内容 分别放入创建的节点
//						for (var j = 0; j < gd.length; j++) {
//							var gdObj = gd[j]; //代表每个更多中的单独信息
//							//创建节点
//							var gddiv = $("<div class='colL6 lboder'><p><a href='" + gdObj.menuTarge + "'><img src='" +
//									gdObj.p + "' /></p></a></div>")
//								//将创建好的节点放入指定盒子中	 
//							$(".ls6").append(gddiv)
//						}
//					}
//					if (key == "weide") {
//						var wd = navObj[key]; //定义系列对象
//						//获取出列表中的各类
//						for (var j = 0; j < wd.length; j++) {
//							var wdObj = wd[j]; //获取的是每个类的对象  其中又分多个项
//							//思路这些项装在一个div 中所以创建节点
//							//又因为每个样式不同判
//							if (j == 0) {
//								var wddiv = $("<div class='colL3 lboder'></div>")
//							} else {
//								var wddiv = $("<div class='colL3'></div>")
//							}
//							//创建类 的标题
//							var wdH4 = $("<h2></h2>");
//							wdH4.html("<a style='color:red' href='" + wdObj.menuTarge + "'>" + wdObj.H2 + "</a>")
//								//将其放入div内
//							wddiv.append(wdH4)
//								//获取项
//							var wdX = wdObj.op
//								//创建结束后再向每个类中放入项； 项有多个循环便利
//							for (var k = 0; k < wdX.length; k++) {
//								//创建类  因类也个不相同判断
//								var wdp = wdX[k]; //设置的项
//								//创建p
//								if (wdp.jj == "kk") {
//									k == wdX.length - 1
//									var wdpt = $("<p></p>");
//									wdpt.html("<p class='ptop'><b>" + wdp.p + "</b><i></i></p>")
//									wddiv.append(wdpt)
//								} else {
//									if (wdp.cc == "aa") {
//										var wdpt = $("<p></p>");
//										wdpt.html("<p><i>" + wdp.p + "</i></p>")
//										wddiv.append(wdpt)
//									} else {
//										var wdpt = $("<p></p>");
//										wdpt.html("<p>" + wdp.p + "</p>")
//										wddiv.append(wdpt)
//									}
//								}
//							}
//							$(".lsw").append(wddiv)
//						}
//					}
//					if (key == "nv") {
//						var nv = navObj[key]; //定义系列对象
//						//获取出列表中的各类
//						for (var j = 0; j < nv.length; j++) {
//							var nvObj = nv[j]; //获取的是每个类的对象  其中又分多个项
//							//思路这些项装在一个div 中所以创建节点
//							//又因为每个样式不同判
//							if (j == 0) {
//								var nvdiv = $("<div class='colL3 lboder'></div>")
//							} else {
//								var nvdiv = $("<div class='colL3'></div>")
//							}
//							//创建类 的标题
//							var nvH4 = $("<h2></h2>");
//							nvH4.html("<a style='color:red' href='" + nvObj.menuTarge + "'>" + nvObj.H2 + "</a>")
//								//将其放入div内
//							nvdiv.append(nvH4)
//								//获取项
//							var nvX = nvObj.op
//								//创建结束后再向每个类中放入项； 项有多个循环便利
//							for (var k = 0; k < nvX.length; k++) {
//								//创建类  因类也个不相同判断
//								var nvp = nvX[k]; //设置的项
//								//创建p
//								if (nvp.jj == "kk") {
//									k == nvX.length - 1
//									var nvpt = $("<p></p>");
//									nvpt.html("<p class='ptop'><b>" + nvp.p + "</b><i></i></p>")
//									nvdiv.append(nvpt)
//								} else {
//									if (nvp.cc == "aa") {
//										var nvpt = $("<p></p>");
//										nvpt.html("<p><i>" + nvp.p + "</i></p>")
//										nvdiv.append(nvpt)
//									} else {
//										var nvpt = $("<p></p>");
//										nvpt.html("<p>" + nvp.p + "</p>")
//										nvdiv.append(nvpt)
//									}
//								}
//							}
//							$(".lsn").append(nvdiv)
//						}
//					}
//					if (key == "leitu") {
//						var lt = navObj[key]; //定义系列对象
//						//获取出列表中的各类
//						for (var j = 0; j < lt.length; j++) {
//							var ltObj = lt[j]; //获取的是每个类的对象  其中又分多个项
//							//思路这些项装在一个div 中所以创建节点
//							//又因为每个样式不同判
//							if (j == 0) {
//								var ltdiv = $("<div class='colL3 lboder'></div>")
//							} else {
//								var ltdiv = $("<div class='colL3'></div>")
//							}
//							//创建类 的标题
//							var ltH4 = $("<h2></h2>");
//							ltH4.html("<a style='color:red' href='" + ltObj.menuTarge + "'>" + ltObj.H2 + "</a>")
//								//将其放入div内
//							ltdiv.append(ltH4)
//								//获取项
//							var ltX = ltObj.op
//								//创建结束后再向每个类中放入项； 项有多个循环便利
//							for (var k = 0; k < ltX.length; k++) {
//								//创建类  因类也个不相同判断
//								var ltp = ltX[k]; //设置的项
//								//创建p
//								if (ltp.jj == "kk") {
//									k == ltX.length - 1
//									var ltpt = $("<p></p>");
//									ltpt.html("<p class='ptop'><b>" + ltp.p + "</b><i></i></p>")
//									ltdiv.append(ltpt)
//								} else {
//									if (ltp.cc == "aa") {
//										var ltpt = $("<p></p>");
//										ltpt.html("<p><i>" + ltp.p + "</i></p>")
//										ltdiv.append(ltpt)
//									} else {
//										var ltpt = $("<p></p>");
//										ltpt.html("<p>" + ltp.p + "</p>")
//										ltdiv.append(ltpt)
//									}
//								}
//							}
//							$(".lsl").append(ltdiv)
//						}
//					}
//					//创建男子
//					if (key == "man") {
//						var man = navObj[key]; //定义系列对象
//						//获取出列表中的各类
//						for (var j = 0; j < man.length; j++) {
//							var manObj = man[j]; //获取的是每个类的对象  其中又分多个项
//							//思路这些项装在一个div 中所以创建节点
//							//又因为每个样式不同判
//							if (j == 0) {
//								var mandiv = $("<div class='colL3 lboder'></div>")
//							} else {
//								var mandiv = $("<div class='colL3'></div>")
//							}
//							//创建类 的标题
//							var manH4 = $("<h2></h2>");
//							manH4.html("<a style='color:red' href='" + manObj.menuTarge + "'>" + manObj.H2 + "</a>")
//								//将其放入div内
//							mandiv.append(manH4)
//								//获取项
//							var manX = manObj.op
//								//创建结束后再向每个类中放入项； 项有多个循环便利
//							for (var k = 0; k < manX.length; k++) {
//								//创建类  因类也个不相同判断
//								var manp = manX[k]; //设置的项
//								//创建p
//								if (manp.jj == "kk") {
//									k == manX.length - 1
//									var manpt = $("<p></p>");
//									manpt.html("<p class='ptop'><b>" + manp.p + "</b><i></i></p>")
//									mandiv.append(manpt)
//								} else {
//									if (manp.cc == "aa") {
//										var manpt = $("<p></p>");
//										manpt.html("<p><i>" + manp.p + "</i></p>")
//										mandiv.append(manpt)
//									} else {
//										var manpt = $("<p></p>");
//										manpt.html("<p>" + manp.p + "</p>")
//										mandiv.append(manpt)
//									}
//								}
//							}
//							$(".lsm").append(mandiv)
//						}
//					}
//					//创建所有 商品
//					if (key == "soyou") {
//						//获取所有商品集合
//						var sy = navObj[key];
//						//获取结合后 起浓分三层
//						//分类 上部信息
//						var sys = sy[0];
//						//上部信息循环便利获取其中的信息
//						for (var j = 0; j < sys.length; j++) {
//							var sysObj = sys[j]; //获取的是每个类的对象  其中又分多个项
//							//思路这些项装在一个div 中所以创建节点
//							//又因为每个样式不同判
//							if (j == 0) {
//								var sysdiv = $("<div class='colL3 lboder'></div>")
//							} else {
//								var sysdiv = $("<div class='colL3'></div>")
//							}
//							//创建类 的标题
//							var sysH4 = $("<h2></h2>");
//							sysH4.html("<a style='color:red' href='" + sysObj.menuTarge + "'>" + sysObj.H2 + "</a>")
//								//将其放入div内
//							sysdiv.append(sysH4)
//								//获取项
//							var sysX = sysObj.op
//								//创建结束后再向每个类中放入项； 项有多个循环便利
//							for (var k = 0; k < sysX.length; k++) {
//								//创建类  因类也个不相同判断
//								var sysp = sysX[k]; //设置的项
//								//创建p
//								if (sysp.jj == "kk") {
//									k == sysX.length - 1
//									var syspt = $("<p></p>");
//									syspt.html("<p class='ptop'><b>" + sysp.p + "</b><i></i></p>")
//									sysdiv.append(syspt)
//								} else {
//									if (sysp.cc == "aa") {
//										var syspt = $("<p></p>");
//										syspt.html("<p><i>" + sysp.p + "</i></p>")
//										sysdiv.append(syspt)
//									} else {
//										var syspt = $("<p></p>");
//										syspt.html("<p>" + sysp.p + "</p>")
//										sysdiv.append(syspt)
//									}
//								}
//							}
//							$(".lss").append(sysdiv)
//						}
//						//中部信息
//						var syz = sy[1];
//						//for循环便利信息
//						for (var m = 0; m < syz.length; m++) {
//							//创建节点
//							var li = $("<li></li>");
//							//节点的内容
//							li.html("<p><img src='" + syz[m] + "' </p>");
//							//放入相应的节点
//							$(".rec-box").append(li)
//						}
//						//下部信息
//						var syx = sy[2];
//						for (var b = 0; b < syx.length; b++) {
//							//创建节点
//							var span = $("<span></span>")
//							span.html("<img src='" + syx[b] + "' />")
//							$(".Link").append(span)
//						}
//					}
//					//加载完成执行事件
//					/***********************************导航移入效果*****************************/
//					//思路 首先 移入li后其背景色改变并且字体颜色改变 下角标
//					//路径改变变白
//					//	移入其中触发 信息效果
//					var indexx
//					$("#nav").hover(function() {
//						//移入li 变色
//						$(".initial").mouseover(function() {
//							indexx = $(this).index()
//							$(this).addClass("liactive").siblings().removeClass("liactive")
//								//切换角标色
//							$(this).children().children("i").css({
//									background: "url(../img/index-img/global.png) -173px -14px"
//								})
//								//切换角标色
//							$(this).siblings().children().children("i").css({
//									background: "url(../img/index-img/global.png) -166px -14px"
//								})
//								//显示隐藏 导航
//							var inde = $(this).index();
//							$(".list").siblings(".list").css({
//								display: "none"
//							})
//							$(".list").eq(inde).css({
//								display: "block"
//							})
//						})
//					}, function() {
//						$(".list").siblings(".list").css({
//							display: "none"
//						})
//						$(".initial").eq(indexx).removeClass("liactive")
//					})
//				}
//			})
/******************************商品详情事件************************************************/
//function xiangqing(){
//	//侧导航移入事件
//	$(".right-nav li").mouseover(function(){
//		//改变当前样式
//		$(this).addClass("li-nav-active").siblings("li").removeClass("li-nav-active")
//		//获取当前下标
//		var inde=$(this).index();
//		//改变对应盒子样式
//		$(".nav-xinxi .n-x").eq(inde).addClass("n-x-active").siblings(".n-x").removeClass("n-x-active")
//	})
//	//便利每个商品盒子 委托事件 编写进入商品列表后列表样式改变
//	$(".n-x").each(function(){
//		//委托写法  创建事件
//		$(this).on("mouseover",".n-x-xang",function(){
//			//改变当前的商品背景色
//			$(this).addClass("n-x-a").siblings(".n-x-xang").removeClass("n-x-a")
//		})
//		//离开事件
//		$(this).on("mouseout",".n-x-xang",function(){
//			//改变当前的商品背景色
//			$(this).removeClass("n-x-a")
//		})
//	})
//}
//动态生成透明轮播图

//			$.get("../js/hoome.json", function(data) {
//				//总体的轮播信息
//				var lbt = data[1];
//				//for in 循环便利获取所需信息
//				for (var key in lbt) {
//					//找到所需的轮播
//					if (key == "tmlbt1") {
//						var ltm = lbt[key];
//						for (var i = 0; i < ltm.length; i++) {
//							//获取后创建节点
//							if (i == 0) {
//								var span = $("<span class='tm-active'></span>")
//							} else {
//								var span = $('<span></span>')
//							}
//							//创建存放的字符串
//							var str = '<a href="' + ltm[i].menuTarge + '"><img src="' + ltm[i].p + '"/></a>'
//							span.html(str);
//							//放入文档中
//							$(".left-tm").append(span)
//						}
//						//创建左右按钮
//						var i1 = $('<i class="tml-l"></i>')
//						var i2 = $('<i class="tml-r"></i>')
//						$(".left-tm").append(i1)
//						$(".left-tm").append(i2)
//					}
//					if (key == "tmlbt2") {
//						var ltm1 = lbt[key];
//						for (var i = 0; i < ltm1.length; i++) {
//							//获取后创建节点
//							if (i == 0) {
//								var span = $("<span class='tm-active'></span>")
//								var li=$('<li class="l-t-active"></li>')
//							} else {
//								var span = $('<span></span>')
//								var li=$('<li></li>')
//							}
//							//创建存放的字符串
//							var str = '<a href="' + ltm1[i].menuTarge + '"><img src="' + ltm1[i].p + '"/></a>'
//							span.html(str);
//							//放入文档中
//							$(".right-tm").append(span)
//							$(".r-t-n").append(li)
//						 
//							
//						}
//						//创建左右按钮
//						var i1 = $('<i class="tmr-l"></i>')
//						var i2 = $('<i class="tmr-r"></i>')
//						$(".right-tm").append(i1)
//						$(".right-tm").append(i2)
//					}
//
//				}
//			})
//静态 透明轮播
//				var TMtime; //透明度定时器
//				var TmIndex = 0; //透明度下标
//				var TMflag = true; //定义开关
//				//自动轮播
//				TMmove()
//
//				function TMmove() {
//					TMtime = setInterval(function() {
//						$(".tml-r").click()
//					}, 2000)
//				}
//
//				//点击右侧按钮
//				$(".tml-r").click(function() {
//
//					if (TMflag) {
//						TMflag = false
//							//当前图片消失
//						$(".left-tm span").eq(TmIndex).css({
//								display: "none"
//							})
//							//当前 导航样式该变
//						$(".l-t-n li").eq(TmIndex).removeClass("l-t-active")
//							//变换下一张
//						TmIndex++
//						//判断界限
//						if (TmIndex > 3) {
//							TmIndex = 0
//						}
//						//下一张图片导航样式改变
//						$(".l-t-n li").eq(TmIndex).addClass("l-t-active")
//							//下一张图片出现
//						$(".left-tm span").eq(TmIndex).css({
//								display: "block"
//							}).siblings("span").css({
//								//让其他兄弟元素透明度为0
//								opacity: 0
//							})
//							//下一张图片透明度0~~1
//						$(".left-tm span").eq(TmIndex).animate({
//							opacity: 1
//						}, 1000, function() {
//							TMflag = true
//						})
//					}
//				})
//				//左点击事件
//				$(".tml-l").click(function() {
//					if (TMflag) {
//						TMflag = false
//							//当前图片消失
//						$(".left-tm span").eq(TmIndex).css({
//								display: "none"
//							})
//							//当前 导航样式该变
//						$(".l-t-n li").eq(TmIndex).removeClass("l-t-active")
//							//变换下一张
//						TmIndex--
//						//判断界限
//						if (TmIndex < 0) {
//							TmIndex = 3
//						}
//						//下一张图片导航样式改变
//						$(".l-t-n li").eq(TmIndex).addClass("l-t-active")
//							//下一张图片出现
//						$(".left-tm span").eq(TmIndex).css({
//								display: "block"
//							}).siblings("span").css({
//								//让其他兄弟元素透明度为0
//								opacity: 0
//							})
//							//下一张图片透明度0~~1
//						$(".left-tm span").eq(TmIndex).animate({
//							opacity: 1
//						}, 1000, function() {
//							TMflag = true
//						})
//					}
//				})
//				//移入轮播项时停止定时器
//				$(".left-tm").mouseover(function() {
//					clearInterval(TMtime)
//				})
//				//移除运动
//				$(".left-tm").mouseout(function() {
//					TMmove()
//				})
//				//下导航点击事件
//				$(".tm-nav li").click(function() {
//					if (TMflag) {
//						TMflag = false
//							//停止定时器
//						clearInterval(TMtime)
//							//当前图片消失
//						$(".left-tm span").eq(TmIndex).css({
//								display: "none"
//							})
//							//当前 导航样式该变
//						$(".l-t-n li").eq(TmIndex).removeClass("l-t-active")
//							//获取点击导航的下标
//							//变换下一张
//						TmIndex = $(this).index();
//						//判断界限
//						//下一张图片导航样式改变
//						$(".l-t-n li").eq(TmIndex).addClass("l-t-active")
//							//下一张图片出现
//						$(".left-tm span").eq(TmIndex).css({
//								display: "block"
//							}).siblings("span").css({
//								//让其他兄弟元素透明度为0
//								opacity: 0
//							})
//							//下一张图片透明度0~~1
//						$(".left-tm span").eq(TmIndex).animate({
//							opacity: 1
//						}, 1000, function() {
//							TMflag = true
//								//启动定时器
//							TMmove()
//						})
//					}
//				})

//创建该健身馆运动事件函数
//function  GYMmotion(dom,Event,qcount,hcount,time){
//	$(dom).hover(function(){
//		$(this).stop().animate({
//			Event:qcount
//		},time)
//	},function(){
//		$(this).stop().animate({
//			Event:hcount
//		},time)
//	})
//	
//}